<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    //方式一:
    <style>
        div{
            padding: 30px;
        }
        div.box1{
            background: red;
        }
        div.box2{
            background: green;
        }
        div.box3{
            background: yellow;
        }
    </style>
    
    <div class="box1">
        <div class="box2">
            <div class="box3">
            </div>
        </div>
    </div>
    //利用if语句判断是标准还是火狐，在嵌套判断上下
    <script>
        // //标准浏览器器和IE浏览器
        // document.onmousewheel=function () {
        //     console.log("标准滚动")
        //     var ev=window.event
        //     console.log(ev)         //查看滚动方向    ev.wheelDelta输出： -120 表示向下     120 表示向上
        // }
    
        // //火狐浏览器滚动事件
        // document.addEventListener("DOMMouseScroll",function () {
        //     console.log("火狐滚动")
        //     var ev=window.event
        //     console.log(ev)         //查看滚动方向    ev.detai：-3：表示向上滚动      3：表示向下滚动
        // },false)
        var c = console.log.bind(document)
        }
    </script>
<script>

    //标准浏览器器和IE浏览器
    // document.onmousewheel=fn

    // //火狐浏览器滚动事件
    // document.addEventListener("DOMMouseScroll",fn,false)

    // function fn(evn){
    //     var  ev =window.event || evn

        //console.log(ev.detail)         //火狐
        //console.log(ev.wheelDelta)     //ie 和 chrome

        //标准浏览器
        /*if(ev.wheelDelta>0){
            console.log("向上");
        }else{
            console.log("向下");
        }*/

        //判断是chome 还是火狐
    //     if(ev.wheelDelta){ //如果存在就是标准浏览器

    //         //判定方向 -120向下   120向上
    //         if(ev.wheelDelta>0){
    //             console.log('向上');
    //         }else{
    //             console.log('向下');
    //         }

    //     }
    //     else{// 否则是火狐浏览器

    //         //判定方向  3向下   -3向上
    //         if(ev.detail>0){
    //             console.log('向下');
    //         }else{
    //             console.log('向上');
    //         }
    //     }
    // }

    // onclick         点击事件
    // onmouseover     鼠标滑上
    // onmouseleave    鼠标滑离
    // onmouseout      鼠标移出
    // onmouseenter    鼠标移入
    // onmousedown     鼠标按下
    // onmousemove     鼠标移动
    // ondblclick      鼠标双击
</script>
    <script>
        // var odiv1=document.querySelector('.box1')
        // var odiv2=document.querySelector('.box2')
        // var odiv3=document.querySelector('.box3')
        // odiv1.addEventListener('click',fn1,false)
        // odiv2.addEventListener('click',fn2,false)
        // odiv3.addEventListener('click',fn3,false)
        // function fn1(){
        //     console.log('fn1')
        // }
        // function fn2(ven) {
        //     var ev = window.ev || ven
        //     console.log('fn2')
        //     ev.stopPropagation()
        //     ev.cancelBubble
        // }
        // function fn3(evn) {
        //     var ev = window.ev||evn
        //     console.log('fn3')
        //     ev.stopPropagation()
        //     ev.cancelBubble=true
        // }
        //冒泡  从box3 --- box2 --- box1 --- body --- html --- documnet 路径中 哪一方有事件都会触发
    
        //控制台输出：点击那个就单独输出那个
    </script>
    
    
    //方式二:
    <script>
        var odiv1=document.querySelector('.box1')
        var odiv2=document.querySelector('.box2')
        var odiv3=document.querySelector('.box3')

       odiv1.onclick = function(evn){
        console.log('odiv1')
       }
       odiv2.onclick = function(evn){
        console.log('odiv2')
        var ev = window.ev || evn
        ev.stopPropagation()
        ev.cancelBubble=true
      }
       odiv3.onclick = function(evn){
        console.log('odiv3')
        var ev = window.ev || evn
        // ev.stopPropagation()
        // ev.cancelBubble=true
       }
       
    </script>
    
</body>
</html>